<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月25日 17:32:44
-->
<template>
  <div class="message">
    <a-badge :count="dynamicList.length" class="dynamicbadge"></a-badge>
    <a-badge :count="giveList.length" class="givebadge"></a-badge>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="未读评论">
        <div class="box">
          <div class="boxself" v-for="(item, index) in dynamicList" :key="index">
            <div class="user">
              <img :src="baseUrl + item.otherUserImg" alt />
              <div>
                <p style="color: #1890ff; margin-top: -5px; font-weight: 600">
                  {{ item.otherUserName }}
                </p>
                <p>
                  <span style="color: rgb(146 141 141); margin-right: 5px">{{
                    getTime(item.date)
                  }}</span>
                  <span style="color: rgb(146 141 141)">在以下动态中回复了你 :</span>
                  <span style="font-weight: 600; margin-left: 5px">{{
                    item.dynamicContent
                  }}</span>
                </p>
              </div>
            </div>
            <div class="neirong" @click="goDetails(item.dynamic,item)" title="点击查看详情">
              <div class="neironguser">
                <img :src="baseUrl + item.dynamic.createUserimg" alt />
                <div>
                  <p>
                    <span style="color: rgb(251, 114, 153)">{{
                      item.dynamic.createUser
                    }}</span>
                  </p>
                  <p style="font-size: 12px">
                    {{ getTime(item.dynamic.createDate) }} 发布
                  </p>
                </div>
              </div>
              <div class="neirongcontent">{{ item.dynamic.dynamicText }}</div>
            </div>
          </div>
        </div>
        <a-empty v-if="dynamicList.length == 0" description="暂无消息" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="未读点赞" force-render>
        <div class="box">
          <div class="boxself" v-for="(item, index) in giveList" :key="index">
            <div class="user">
              <img :src="baseUrl + item.otherUserImg" alt />
              <div>
                <p style="color: #1890ff; margin-top: -5px; font-weight: 600">
                  {{ item.otherUserName }}
                </p>
                <p>
                  <span style="color: rgb(146 141 141); margin-right: 5px">{{
                    getTime(item.date)
                  }}</span>
                  <span style="color: rgb(146 141 141)">在以下动态中给你点了个大赞</span>
                </p>
              </div>
            </div>
            <div class="neirong" @click="goDetails(item.give,item)" title="点击查看详情">
              <div class="neironguser">
                <img :src="baseUrl + item.give.createUserimg" alt />
                <div>
                  <p>
                    <span style="color: rgb(251, 114, 153)">{{
                      item.give.createUser
                    }}</span>
                  </p>
                  <p style="font-size: 12px">{{ getTime(item.give.createDate) }} 发布</p>
                </div>
              </div>
              <div class="neirongcontent">{{ item.give.dynamicText }}</div>
            </div>
          </div>
        </div>
        <a-empty v-if="giveList.length == 0" description="暂无消息" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
import { timeago } from "@/utils/timeago";
export default {
  name: "message",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      dynamicList: [],
      giveList: [],
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {
    if (localStorage.getItem("token")) {
      this.getmessage();
      this.getmessagegive();
    }
  },
  /**所有方法*/
  methods: {
    goDetails(ele,item) {
      this.$router.push({
        path: "/dynamic/dynamicDetails/",
        query: { username: ele.createUser, id: ele.id },
      });
      this.deleteData(item);
    },
    callback(key) {},
    //评论未读消息通知
    getmessage() {
      requset("post", "/message/dynamic/list", {
        userId: this.userInfo.userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.dynamicList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //点赞未读消息通知
    getmessagegive() {
      requset("post", "/message/give/list", {
        userId: this.userInfo.userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.giveList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 时间 几天前 几月前
    getTime(time) {
      return timeago(time);
    },
    //查看完消息自动删除
    deleteData(item) {
      requset("post", "/message/delete", {
        id: item.id,
      }).then((res) => {
        if (res.data.code == 200) {
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.message {
  width: 85%;
  position: relative;
}
.boxself {
  margin-bottom: 30px;
}
.user {
  display: flex;
  margin: 10px;
}
.user img,
.neirong img {
  width: 40px;
  height: 40px;
  border-radius: 3px;
}
.user p,
.neirong p {
  margin: 0;
  padding: 0;
  margin-left: 10px;
}
.neirongcontent {
  margin-left: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.neirong {
  margin-left: 60px;
  background: #f1f6f7;
  padding: 10px;
}
.neironguser {
  display: flex;
  align-items: center;
}
.neirong:hover {
  cursor: pointer;
}
.givebadge {
  position: absolute;
  top: 0;
  left: 200px;
}
.dynamicbadge {
  position: absolute;
  top: 0;
  left: 100px;
}
</style>
